<template>
  <div>
    <swiper :options="swiperOption">
      <swiper-slide v-for="(item, i) of swiperImg" :key="i">
        <img class="w-100" :src="item.imgUrl">
      </swiper-slide>
      <div class="swiper-pagination pagination-home text-right px-3 pb-2"  slot="pagination"></div>
    </swiper>
    <!-- end of swiper -->
    <div class="nav-icons bg-white mt-3 text-center pt-3 text-dark-1">
      <div class="d-flex flex-wrap">
        <div class="nav-item mb-3" v-for="n of 10" :key="n">
          <i class="sprite sprite-story"></i>
          <div class="py-2">爆料站</div>
        </div>
      </div>
      <div class="bg-light py-2 fs-sm">
        <i class="sprite sprite-arrow mr-1"></i>
        <span class="">收起</span>
      </div>
    </div>
    <!-- end of nav icons -->
    
    
    <m-list-card icon="caidan1" title="新闻资讯" :catigories="newsCats">
      <template #items="{category}">
        <router-link tag="div" :to="`/articles/${item._id}`" class="py-2 fs-lg d-flex" v-for="(item,i) in category.newsList" :key="i">
          <span class="text-info">[{{item.categoryName}}]</span>
          <span class="px-2">|</span>
          <span class="flex-1 text-dark text-ellipsis pr-2">{{item.title}}</span>
          <span class="text-gary-1 fs-sm">{{item.createdAt | date}}</span>
        </router-link>
      </template>
    </m-list-card>

    <m-list-card icon="fenlei-yingxionglianmeng" title="英雄列表" :catigories="heroCats">
      <template #items="{category}">
        <div class="d-flex flex-wrap" style="margin: 0 -0.5rem">
          <router-link tag="div" :to="`/heroes/${item._id}`" class="p-2 text-center" style="width: 20%;" v-for="(item,i) in category.heroList" :key="i">
            <img class="hero-img w-100" :src="item.avatar">
            <p class="text-center">{{item.name}}</p>
          </router-link>
        </div>
      </template>
    </m-list-card>

    <m-card icon="caidan1" title="精彩视频"></m-card>
    <m-card icon="caidan1" title="图文攻略"></m-card>
    <m-card icon="caidan1" title="论坛留言"></m-card>
  </div>
</template>

<script>
import dayjs from 'dayjs'
export default {
  filters: {
    date(val) {
      return dayjs(val).format('MM/DD')
    }
  },
  data() {
    return {
      swiperImg: [
        {imgUrl: require('../assets/images/513555a317442bab7bf7f647b2909dfb.jpeg')},
        {imgUrl: require('../assets/images/513555a317442bab7bf7f647b2909dfb.jpeg')},
        {imgUrl: require('../assets/images/534c2193076392384dbfc1b6070db364.jpeg')},
      ],
      swiperOption: {
        autoplay: true,
        loop: true,
        pagination: {
          el: '.pagination-home'
        }
      },
      newsCats: [],
      heroCats: []
    }
  },
  methods: {
    async fetchNewsCats() {
      const res = await this.$http.get('news/list')
      this.newsCats = res.data
    },
    async fetchHeroCats() {
      const res = await this.$http.get('heroes/list')
      this.heroCats = res.data
    }
  },
  created() {
    this.fetchNewsCats()
    this.fetchHeroCats()
  }
}
</script>

<style lang="scss">
@import '../assets/scss/variables.scss';

.pagination-home {
  .swiper-pagination-bullet {
    opacity: 1;
    border-radius: 0.1538rem;
    background: map-get($colors, 'white');
    &.swiper-pagination-bullet-active {
      background: map-get($colors, 'info');
    }
  }
}

.nav-icons {
  border-top: 1px solid $border-color;
  border-bottom: 1px solid $border-color;
  .nav-item {
   width: 25%; 
   border-right: 1px solid $border-color;
   &:nth-child(4n) {
     border-right: none;
   }
  }
}

// .hero-item {
//   float: left;
//   width: 20%;
//   .hero-img {
//     width: 100%
//   }
// }
</style>

